<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/details.css"/>
	</head>
	<body>
	
		<!-- 头部 -->
		<div id="header">
			<div id="header-con">
				
			</div>
		</div>
		<!-- 内容 -->
		<div id="pdbcontent">
			<div id="pdb">
				<div id="pdbbread">
					<span>首页  /</span>
					<span>  烫发器  /</span>
					<span>  飞科智能感应剃须刀FS927</span>
				</div>
				
				<div id="pdbheader">
					<div id="left">
						<div class="bigimg">
							<!-- <img src="img/detailsBigImg0.jpg">	 -->
							<div id="mask">
								
							</div>
						</div>
						<ul class="imglist">
							<span class="prev">&lt;</span>
							<li>
								<img src="img/detailsBigImg0.jpg" >
							</li>
							<li>
								<img src="img/detailsBigImg2.jpg" >
							</li>
							<li>
								<img src="img/detailsBigImg3.jpg" >
							</li>
							<li>
								<img src="img/detailsBigImg4.jpg" >
							</li>
							<li>
								<img src="img/detailsBigImg1.jpg" >
							</li>
							<span class="next">&gt;</span>
						</ul>
						<div id="rightBigImg">
							
						</div>
					</div>
				
					<div id="right">
						<p class="right-title">飞科智能感应剃须刀FS927</p>
						<p class="right-small-title">创新黑科技 智能感应式剃须刀</p>
						<div class="act-title">
							<span>创新黑科技 智能感应式剃须刀</span>
						</div>
						<div class="act-price">
							<div class="act-price-left">
								<span class="name">活动价</span>
								<span class="sybol">￥</span>
								<span class="price">299.00</span>
								<span class="delprice"> [￥399.00] </span>
							</div>
							<div class="act-price-right">
								<span class="text">累计评价 0</span>
							</div>
						</div>
						<div id="service">
							<div class="service-left">
								<div class="name">服务</div>
							</div>
							<div class="service-right">
								<div class="service-right-item">
									<img src="img/shop1.png" >
									<span>免邮费</span>
								</div>
								<div class="service-right-item">
									<img src="img/shop1.png" >
									<span>官方正品保障</span>
								</div>
								<div class="service-right-item">
									<img src="img/shop1.png" >
									<span>两年全国联保</span>
								</div>
								<div class="service-right-item">
									<img src="img/shop1.png" >
									<span>7天无忧退换货</span>
								</div>
								<div class="service-right-item">
									<img src="img/shop1.png" >
									<span>24小时发货</span>
								</div>
							</div>
						</div>
						
						<div id="limit">
							<div class="limit-name">限制</div>
							<span>特价商品不可与优惠券叠加使用</span>
						</div>
						
						<div id="limit">
							<div class="limit-name">不包邮</div>
							<span>台湾、香港、澳门、海外</span>
						</div>
						
						<div id="specific">
							<div class="specific-left">
								<div class="name">规格</div>
							</div>
							<div class="specific-right">
								<div class="specific-right-item">
									<img src="img/detailsBigImg0.jpg" >
									<img src="img/shop2.png" >
								</div>
							</div>
						</div>
						
						<div id="num">
							<div class="num-left">
								<div class="name">数量</div>
								<div class="num-right">
									<button class="reduce" type="button">-</button>
									<input type="" name="" id="" value="5" />
									<button class="add" type="button">+</button>
									
									
								</div>
							</div>
							
						</div>
						
						<div id="shop">
							<div class="shop-button">
								<button class="car" type="button">
									<span>加入购物车 </span>
								</button>
								<button class="buy" type="button">
									<span>立即购买 </span>
								</button>
							</div>
						</div>
					</div>
				</div>
				
			</div>
			<!-- body -->
			<div id="pdbbody">
				<div class="left">
					<div class="left-header">
						<span>商品介绍</span>
						<span>规格参数</span>
						<span> 商品评价 </span>
					</div>
					<div class="imglist1">
						<img src="img/detailsBody1.jpg" >
						<img src="img/detailsBody2.jpg" >
						<img src="img/detailsBody3.jpg" >
						<img src="img/detailsBody4.jpg" >
						<img src="img/detailsBody6.jpg" >
						<img src="img/detailsBody7.jpg" >
						<img src="img/detailsBody8.jpg" >
						<img src="img/detailsBody9.jpg" >
						<img src="img/detailsBody10.jpg" >
						<img src="img/detailsBody11.jpg" >
						<img src="img/detailsBody12.jpg" >
						<img src="img/detailsBody13.jpg" >
						<img src="img/detailsBody14.jpg" >
						<img src="img/detailsBody15.jpg" >
					</div>
				</div>
				<div class="right">
					<div class="header">为你推荐</div>
					<div class="prodect">
						<div class="prodect-header">
							<img src="img/detailsProduct1.png" >
						</div>
						<div class="prodect-text">
							<span>锋芒初露  净在掌握</span>
						</div>
						<div class="prodect-title">
							<span> 飞科智能剃须刀FS310 </span>
						</div>
						<div class="prodect-bottom">
							<span><i>￥</i> 99.00</span>
							<img src="img/detailsproduct-shop.png" >
						</div>
					</div>
					<div class="prodect">
						<div class="prodect-header">
							<img src="img/detailsProduct1.png" >
						</div>
						<div class="prodect-text">
							<span>锋芒初露  净在掌握</span>
						</div>
						<div class="prodect-title">
							<span> 飞科智能剃须刀FS310 </span>
						</div>
						<div class="prodect-bottom">
							<span><i>￥</i> 99.00</span>
							<img src="img/detailsproduct-shop.png" >
						</div>
					</div>
					<div class="prodect">
						<div class="prodect-header">
							<img src="img/detailsProduct1.png" >
						</div>
						<div class="prodect-text">
							<span>锋芒初露  净在掌握</span>
						</div>
						<div class="prodect-title">
							<span> 飞科智能剃须刀FS310 </span>
						</div>
						<div class="prodect-bottom">
							<span><i>￥</i> 99.00</span>
							<img src="img/detailsproduct-shop.png" >
						</div>
					</div>
					<div class="prodect">
						<div class="prodect-header">
							<img src="img/detailsProduct1.png" >
						</div>
						<div class="prodect-text">
							<span>锋芒初露  净在掌握</span>
						</div>
						<div class="prodect-title">
							<span> 飞科智能剃须刀FS310 </span>
						</div>
						<div class="prodect-bottom">
							<span><i>￥</i> 99.00</span>
							<img src="img/detailsproduct-shop.png" >
						</div>
					</div>
					<div class="prodect">
						<div class="prodect-header">
							<img src="img/detailsProduct1.png" >
						</div>
						<div class="prodect-text">
							<span>锋芒初露  净在掌握</span>
						</div>
						<div class="prodect-title">
							<span> 飞科智能剃须刀FS310 </span>
						</div>
						<div class="prodect-bottom">
							<span><i>￥</i> 99.00</span>
							<img src="img/detailsproduct-shop.png" >
						</div>
					</div>
					<div class="prodect">
						<div class="prodect-header">
							<img src="img/detailsProduct1.png" >
						</div>
						<div class="prodect-text">
							<span>锋芒初露  净在掌握</span>
						</div>
						<div class="prodect-title">
							<span> 飞科智能剃须刀FS310 </span>
						</div>
						<div class="prodect-bottom">
							<span><i>￥</i> 99.00</span>
							<img src="img/detailsproduct-shop.png" >
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<!-- 尾部 -->
		<div id="footer">
			
		</div>
		<!-- 侧边栏 -->
		<div id="aside">
			<a href="">
				<img class="aside1" src="img/aside01.png" >
				<span>二维码</span>
				<div class="aside2">
					<img src="img/aside02.jpg" >
				</div>
			</a>
			<a href="">
				<img src="img/aside03.png" >
				<span>在线<br>客服</span>
			</a>
			<a href="">
				<div id="aside-bottom">
					<img src="img/aside04.png" >
				</div>
			</a>
		</div>
	</body>
</html>
<script src="js/jquery.js"></script>
<script>
	$("#header-con").load("header.html",function(){});
	$("#footer").load("footer.html",function(){});
		
		//鼠标划入 遮罩层出现  大图出现
	$(".bigimg").mouseover(function(){
		$(".bigimg #mask").css({
			display:"block"
		})
		$("#rightBigImg").css({
			display:"block"
		})
	})
	
	//鼠标移走 遮罩层消失 大图消失
	$(".bigimg").mouseout(function(){
		$(".bigimg #mask").css({
			display:"none"
		})
		$("#rightBigImg").css({
			display:"none"
		})
	})
	//判断边界

	
	
	//鼠标移动 
	$(".bigimg #mask").mousemove(function(e){
		let _left = e.pageX - $(".bigimg").offset().left - 71;
		let _top  =  e.pageY - $(".bigimg").offset().top - 71;
		
		if(_left < 0){
			_left = 0;
		}
		if(_left>286){
			_left =286;
		}
		if(_top <0){
			_top = 0;
		}
		if(_top>286){
			_top=286;
		}
		
		$(".bigimg #mask").css({
			left : _left,
			top: _top 
		});
		
		
	//比例
	let x = 428 * _left /142;
	let y = 428 *_top /142;
	
	$("#rightBigImg").css({
		backgroundPositionX : -x ,
		backgroundPositionY: -y 
	})
		
	})
	
	//选择图片切换
	
	$(".imglist li").mouseover(function(){
		$(this).css({
			border:"1px solid blue"
		})
		$(this).nextAll().css({
			border: "2px solid #dcdfe6"
		})
		$(this).prevAll().css({
			border: "2px solid #dcdfe6"
		})
		$(".bigimg").css({
			background:"url("+$(this).children().attr("src")+")",
			backgroundSize:428
		})
		$("#rightBigImg").css({
			background:"url("+$(this).children().attr("src")+")",
			backgroundSize:1290
		})
	})
	//购物车加减
	
	$(".num-right .reduce").click(function(){
	   var i = $(".num-right input")
	   var j =parseInt(i.val());
		if(j>1){
			i.val(j-1)	;	
		}else{
			i.val(1);
		}
		
	})
	$(".num-right .add").click(function(){
		var t = $(".num-right input");
		t.val(parseInt(t.val())+1);
	})
	
	//跳转购物车
	
	$("#shop .shop-button button").click(function(){
		location.href="car.html"
	})
	
	
	//侧边栏
	$(window).scroll(function(){
		//判断侧边栏大于300 出现
		if($(document).scrollTop() >= 300){
			$("#aside a:last").css({
				display:"block"
			});
			//判断大于300 点击返回顶部
			$("#aside a:last").click(function(){
				$(document).scrollTop() == 0;
			})
		}else{
			$("#aside a:last").css({
				display:"none"
			});
		}
		
	});
	
	
</script>